<template>
  <div class="head" :class="{ nmt: !isHome }" id="head">
    <!-- 上半头 :class="{ nmt: navStatus != 1 }"-->
    <div class="head-top">
      <div class="flclear">
        <div class="head-left">
          <span>
            <img
              src="../assets/headfoot/email.svg"
              alt="email"
              width="13"
              height="11"
            />
            support@mishihudong.com
          </span>
          <span>
            <img
              src="..//assets/headfoot/location.svg"
              alt="location"
              width="11"
              height="14"
            />
            辽宁省·大连市·金普新区双D电商产业园4-1
          </span>
        </div>
        <div class="head-right">
          <img
            src="../assets/headfoot/QQ.svg"
            width="16"
            height="17"
            alt="QQ"
          />
          <img
            src="../assets/headfoot/weixin.svg"
            width="21"
            height="17"
            alt="weixin"
          />
        </div>
      </div>
    </div>
    <!-- 下半头 -->
    <div class="head-bot">
      <div class="row">
        <div class="logo">
          <a href="">
            <!-- v-if="navStatus == 1" -->
            <img
              v-if="isHome"
              src="../assets/headfoot/logo-white.svg"
              class="logo-i"
              width="216"
              height="65"
              alt="logo"
              id="LOGO"
            />
            <img
              v-else
              src="../assets/headfoot/logo-black.svg"
              class="logo-i"
              width="216"
              height="65"
              alt="logo"
              id="LOGO"
            />
            <!-- v-else -->
          </a>
        </div>
        <div class="phone">
          <div class="phone-n flclear">
            <div class="p-left">
              <img
                src="../assets/headfoot/telephone.svg"
                alt="telephone"
                width="35"
                height="40"
              />
            </div>
            <div class="p-right">
              <p>与觅视互动建立联络</p>
              <p>400-000-0000</p>
            </div>
          </div>
        </div>
        <div class="w-nav">
          <div class="nav" id="nav">
            <div
              v-for="(item, index) in gopath"
              :key="index"
              :class="{ on: index == pathIndex }"
              @click="pathIndex = index"
              @mouseenter="pathIndex = index"
              @mouseleave="handleLeave(index)"
            >
              <router-link :to="item[0]">{{ item[1] }}</router-link>
            </div>
            <p :style="'left: ' + pathIndex * 160 + 'px'">
              <i class="on-go"></i>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState } from "vuex"

export default {
  computed: {
    // ...mapState("nav", ['navStatus', 'path'])
  },
  data() {
    return {
      isHome: true,   //头部变色
      pathIndex: 0,
      gopath: [
        ["/", "觅图科技"],
        ["/about", "关于我们"],
        ["/productsServices", "产品&服务"],
        ["/projectCase", "项目案例"],
        ["/newsCenter", "新闻中心"],
        ["/contactUs", "联系我们"],
      ]
    };
  },
  watch: {
    $route: {
      handler(nv, ov) {
        // console.log(nv.path)
        if (nv.path == "/home") {
          this.isHome = true;
          window.addEventListener('scroll', this.handScroll)
        } else {
          this.isHome = false;
          window.removeEventListener('scroll', this.handScroll)
        }
        this.handleLeave();


        $('html,body').animate({ scrollTop: 0 });

      }
    }
  },
  methods: {
    handleLeave() {
      let path = this.$route.path;
      this.gopath.forEach((item, index) => {
        if (path === item[0] || item[0] === "/") {
          this.pathIndex = index;
        }
      })
    },
    handScroll(height) {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= this.innerHeight) {
        this.isHome = false;
      } else {
        this.isHome = true;
      }
    }
  },
  computed: {
    innerHeight() {
      return window.innerHeight
    }
  },
  beforeCreate() {
    // console.warn('我是beforeCreate 初始化事件和生命周期了')
  },
  created() {
    // console.warn("我是created执行了 初始化外部注入和双向绑定完成")
  },
  beforeUpdate() {
    // console.warn("我是beforeUpdate 我在数据改变前执行了");
  },
  updated() {
    // console.warn("我是updated 我在数据改变后执行了")
  },
  mounted() {
    // console.log("mounted函数");
    window.addEventListener('scroll', this.handScroll);
    console.log(document.documentElement.scrollTop)

  }
}
</script>

<style scoped lang="scss">
.head {
  // display: none;
  /* border: 1px solid blue; */
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.53);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top;
  overflow: hidden;

  /* 上半头 */

  .head-top {
    height: 45px;
    line-height: 45px;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid #5f5f5f;
    position: relative;
  }

  .head-top > div {
    width: 1803px;
    margin: 0 auto;
    overflow: hidden;
  }

  .head-top .head-left {
    float: left;
    vertical-align: top;
  }

  .head-top .head-left span {
    font-size: 14px;
    color: #ffffff;
  }

  .head-top .head-left span:last-child {
    margin-left: 30px;
  }

  .head-top .head-right {
    float: right;
    vertical-align: top;
  }

  .head-top .head-right img:last-child {
    margin-left: 13px;
  }

  /* 下半头 */

  .head-bot {
    height: 86px;
    width: 100%;
    vertical-align: middle;
    line-height: 86px;
  }

  .head-bot .row {
    max-width: 1803px;
    min-width: 1300px;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }

  .head-bot .logo {
    vertical-align: middle;
    float: left;
    img {
      vertical-align: middle;
    }
  }

  .head-bot .nav {
    display: flex;
    justify-content: space-between;
    padding: 0;
    width: 890px;
    z-index: 50;
    margin: 0 auto;
    position: relative;
  }
  .head-bot .w-nav {
    width: 100%;
  }

  .head-bot .nav p {
    // width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    width: 90px;
    transition: all 0.5s;
    left: 0;
  }

  .head-bot .nav p i {
    height: 3px;
    width: 100%;
    border-bottom: 4px solid #0054f7;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background: transparent;
    border-radius: 2px;
    transition: all 0.5s;
  }

  .head-bot .nav div {
    height: 100%;
    line-height: 86px;
    text-align: center;
    box-sizing: border-box;
    text-align: center;
    width: 90px;
  }

  .head-bot .nav div a {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: color 0.5s;
  }
  .head-bot .nav div:hover a {
    color: #0054f7;
  }

  .head-bot .phone {
    float: right;
    vertical-align: middle;
    height: 100%;
    margin-top: 18px;
  }

  .head-bot .phone .phone-n > div {
    float: left;
  }

  .head-bot .phone .phone-n .p-left {
    margin-right: 10px;
    line-height: 1;
  }

  .head-bot .phone .phone-n > div p {
    margin: 0;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1;
    letter-spacing: 1px;
  }

  .head-bot .phone .phone-n > div p:last-child {
    font-size: 18px;
    margin: 0;
  }
}
// 头部变色
.head.nmt {
  background-color: #fff;
}
.head.nmt .head-top {
  border-color: #f0efef;
}
.head.nmt .head-top .head-left span {
  color: #000000;
  overflow: hidden;
}

.head.nmt .head-top .head-left span img {
  position: relative;
  left: 0;
  top: -60px;
  filter: drop-shadow(#0054f7 0 60px);
}

.head.nmt .head-top .head-right {
  overflow: hidden;
}

.head.nmt .head-top .head-right img {
  position: relative;
  left: 0;
  top: -60px;
  filter: drop-shadow(#0054f7 0 60px);
}

.head.nmt .head-bot .nav div a {
  transition: color 0.5s;
  color: #000000;
}
.head .head-bot .nav div:hover a {
  color: #0054f7;
}

.head.nmt .head-bot .phone .phone-n > div p {
  color: #000;
}
.head.nmt .head-bot .phone .phone-n > div p:last-child {
  font-size: 18px;
  font-family: Arial-Black, Arial;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.85);
}
</style>